<template>
  <section>
    <idss-widget style="padding: 10px;margin-bottom:10px">
      <template slot="title-left">
        <span>筛选条件</span>
      </template>
      <el-form ref="searchForm" :model="searchForm" :inline="true">
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="searchForm.name" size="small"></el-input>
        </el-form-item>
        <el-form-item label="所属地区" prop="province">
          <el-select
            v-model="searchForm.province"
            placeholder="请选择省份"
            @change="changeCitys(searchForm.province)"
          >
            <el-option v-for="item in provinces" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
          <el-select
            v-model="searchForm.city"
            placeholder="请选择市"
            v-if="citys.length"
            @change="changeAreas(searchForm.city)"
          >
            <el-option v-for="item in citys" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
          <el-select v-model="searchForm.area" placeholder="请选择县/区" v-if="areas.length">
            <el-option v-for="item in areas" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="submitForm('searchForm')">查询</el-button>
          <el-button size="small" @click="resetForm('searchForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </idss-widget>
    <idss-widget style="padding:0 10px 15px;">
      <template slot="title-left">
        <span>商品列表</span>
      </template>
      <template slot="title-right">
        <!-- 新建 -->
        <el-button icon="el-icon-plus" size="mini" @click="openPro('add', null)">新增</el-button>
        <el-button
          icon="el-icon-delete"
          type="danger"
          size="mini"
          @click="delPro('more', null)"
        >批量删除</el-button>
      </template>
      <el-table
        :data="tableData.data"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
        <el-table-column prop="title" label="商品名" align="center"></el-table-column>
        <el-table-column prop="describe" label="描述" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="openPro('look', scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="openPro('edit', scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="delPro('single', scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="text-align:center">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="tableData.pageNum"
          :page-size="tableData.pageSize"
          layout="total, prev, pager, next"
          :total="tableData.total"
        ></el-pagination>
      </el-row>
    </idss-widget>
  </section>
</template>
<script>
const API = {
  LIST: {
    url: "/api/services/app/ProductInfo/GetPaged",
    method: "Get"
  },
  // 新增
  ADD: {
    request: {
      url: "/api/services/app/ProductInfo/Create",
      method: "Post"
    },
    title: "新增产品"
  },
  // 编辑
  EDIT: {
    request: {
      url: "/api/services/app/ProductInfo/Update",
      method: "Put"
    },
    title: "编辑产品"
  },
  // 删除
  DEL(id) {
    return {
      url: "/api/services/app/ProductInfo/Delete?Id=" + id,
      method: "DELETE"
    };
  }
};
import service from "./service";
export default {
  mixins: [service],
  data() {
    return {
      tableData: {
        data: [],
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      searchForm: {
        name: "",
        province: "",
        city: "",
        area: ""
      },
      provinces: [],
      citys: [],
      areas: [],
      multipleSelection: []
    };
  },
  methods: {
    submitForm() {
      this.getList();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.searchForm.city = "";
      this.searchForm.area = "";
      this.citys = [];
      this.areas = [];
    },
    changeCitys() {
      let { city = "", area = "" } = this.searchForm;
      this.searchForm.city = "";
      this.searchForm.area = "";
      this.citys = [];
      this.areas = [];
      this.getCitys(this.searchForm.province);
    },
    changeAreas(){
      this.searchForm.area = "";
      this.areas = [];
      this.getAreas(this.searchForm.city)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCurrentChange(val) {
      this.tableData.pageNum = val;
      this.getList();
    },
    // 查询列表
    getList() {
      var Filter = {};
      this.searchForm.name && (Filter.typename = this.searchForm.name);
      this.searchForm.province && (Filter.areaid = this.searchForm.province);
      this.searchForm.city && (Filter.areaid = this.searchForm.city);
      this.searchForm.area && (Filter.areaid = this.searchForm.area);
      var data = {
        filter: JSON.stringify(Filter),
        sorting: "title",
        skipCount: (this.tableData.pageNum - 1) * this.tableData.pageSize,
        maxResultCount: this.tableData.pageSize
      };
      this.$axios({
        ...API.LIST,
        params: data
      }).then(res => {
        this.tableData.data = res.data.result.items;
        this.tableData.total = res.data.result.totalCount;
      });
    },
    // 新增/编辑分类
    openPro(type, param) {
      this.$router.push({
        path: `/product/${type}`,
        query: { type: type, param: param.id }
      });
    },
    delPro(param, row) {
      if (param === "single") {
        this.deleteConfirm(row.id);
      } else {
        if (!this.multipleSelection.length) {
          this.$message("没有选择删除数据", "warning");
        } else {
          this.deleteConfirm(0);
        }
      }
    },
    deleteConfirm(id) {
      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (id !== 0) {
            this.$axios({
              ...API.DEL(id)
            }).then(() => {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getList();
            });
          } else {
            let promise = [];
            this.multipleSelection.forEach(value => {
              debugger;
              promise.push(
                this.$axios({
                  ...API.DEL(value.id)
                })
              );
            });
            Promise.all(promise).then(value => {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getList();
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  mounted() {
    this.getList();
  }
};
</script>
<style >
.myitem .el-form-item__content {
  margin-left: 0 !important;
}
</style>
